<template>
  <div class="app-container">
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >

      <el-table-column
        v-for="(item,index) in tableList"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :prop="item.prop"
        align="center"
      >
      </el-table-column>

      <el-table-column
        align="center"

        label="操作"
      >
        <template slot-scope="scope">
          <router-link
            :to="'/core/integral-grade/edit/'+scope.row.id"
            style="margin-right: 5px"
          >
            <el-button
              size="mini"
            >编辑
            </el-button>
          </router-link>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>

import integralGradeApi from '@/api/core/integral-grade'

export default {
  name: 'List',
  data() {
    return {
      tableList: [
        { prop: 'id', label: '编号', width: 50, minWidth: 50 },
        { prop: 'integralStart', label: '积分开始区间', width: 180, minWidth: 180 },
        { prop: 'integralEnd', label: '积分结束区间', width: 180, minWidth: 180 },
        { prop: 'borrowAmount', label: '借款额度', width: 180, minWidth: 180 }
      ],
      tableData: []
    }
  },
  methods: {

    //渲染数据
    fetchData() {
      integralGradeApi.list()
        .then(response => {
          this.tableData = response.data.list
        })
        .catch(error => {
          console.log(error)
        })
    },

    handleEdit(index, row) {
      console.log(row)
    },
    handleDelete(index, row) {
      this.$confirm('真的要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return integralGradeApi.removeById(row.id)
        })
        .then(response => {
          //重新渲染数据
          this.fetchData()

          this.$message({
            type: 'success',
            message: response.message
          })
        })
        .catch(error => {
          console.log(error)
          if (error === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          }
        })
    }
  },

  mounted() {
    this.fetchData()
  }

}
</script>

<style scoped>

</style>
